<template>
  <vab-dialog v-model="isShowDialog" :close-on-click-modal="true" show-fullscreen width="80%">
    <template #default>
      <CommonForm
        ref="commonFormRef"
        v-model="form"
        v-loading="formLoading"
        :layout-config="layoutConfig"
        :option="option"
        @on-cancel="onHandleCancel"
        @on-handle-change-value="onHandleChange"
        @on-success="onHandleSuccess"
      >
        <template #iconSlot>
          <SelectIcon v-model:icon-value="form.icon" />
        </template>
        <template #btnsSlot>
          <el-checkbox-group v-model="form.btns">
            <el-checkbox :key="add" label="新增" />
            <el-checkbox :key="edit" label="修改" />
            <el-checkbox :key="del" label="删除" />
            <el-checkbox :key="delAll" label="批量删除" />
            <el-checkbox :key="'import'" label="导入" />
            <el-checkbox :key="'export'" label="导出" />
          </el-checkbox-group>
        </template>
      </CommonForm>
    </template>
  </vab-dialog>
</template>

<script>
import CommonForm from "@/plugins/form/CommonForm.vue";
import VabDialog from "@/plugins/VabDialog/index.vue";
import { TableColumnOrFormTypeEnum } from "@/plugins/commonType.enum";
import SelectIcon from "@/components/SelectIcon/index.vue";

export default defineComponent({
  name: "MenuEdit",
  components: {
    CommonForm,
    VabDialog,
    SelectIcon
  },
  emits: { "on-success": null },
  setup(props, { expose, emit }) {
    const state = reactive({
      detailUrl: "system/menu",
      addUrl: "system/menu/add",
      updateUrl: "system/menu/update",
      isShowDialog: false,
      formLoading: false,
      layoutConfig: {
        //form组件布局
        column: 2
      }
    });

    const form = ref({});
    const option = {
      column: [
        {
          label: "上级节点",
          prop: "parentid",
          placeholder: "请选择上级节点",
          type: TableColumnOrFormTypeEnum.SELECTTREE,
          dictUrl: "system/menu/query",
          treesearchable: true,
          multiple: false,
          expand: 2
        },
        {
          label: "类型",
          prop: "menutype",
          type: TableColumnOrFormTypeEnum.SELECT,
          dictCode: "MenuType",
          placeholder: "请选择类别"
        },
        {
          label: "显示图标",
          prop: "icon",
          type: TableColumnOrFormTypeEnum.SLOT,
          slotName: "iconSlot"
        },
        {
          label: "菜单名称",
          prop: "nodename",
          type: TableColumnOrFormTypeEnum.INPUT
        },
        {
          label: "路由名称",
          prop: "name",
          type: TableColumnOrFormTypeEnum.INPUT,
          placeholder: "请输入路由名称，首字母大写UserList"
        },
        {
          label: "路由地址",
          prop: "path",
          type: TableColumnOrFormTypeEnum.INPUT,
          placeholder: "请输入组件路径，如SystemUserList"
        },
        {
          label: "组件路径",
          prop: "component",
          type: TableColumnOrFormTypeEnum.INPUT,
          placeholder: "请输入@/views/xxx下组件路径，如/system/user/userList"
        },
        {
          label: "显示顺序",
          prop: "showorder",
          type: TableColumnOrFormTypeEnum.INPUTNUMBER,
          precision: 0,
          min: 0,
          max: 99999
        },
        {
          label: "权限标识",
          prop: "perms",
          type: TableColumnOrFormTypeEnum.INPUT,
          placeholder: "请输入组件路径，如system:user:list"
        },
        /* {
          label: "按钮权限",
          prop: "btns",
          type: TableColumnOrFormTypeEnum.SLOT,
          slotName: "btnsSlot",
          expand: 2
        }, */
        {
          label: "备注",
          prop: "memo",
          type: TableColumnOrFormTypeEnum.TEXTAREA,
          expand: 2
        }
      ],
      formConfig: {
        title: "",
        isInModal: true
      },
      rules: {
        parentid: [
          {
            required: true,
            message: "请选择上级节点",
            trigger: "blur"
          }
        ],
        nodename: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur"
          },
          {
            min: 2,
            max: 20,
            message: "菜单名称长度为2到20",
            trigger: "blur"
          }
        ],
        name: [
          {
            required: true,
            message: "请输入路由名称",
            trigger: "blur"
          },
          {
            min: 2,
            max: 20,
            message: "路由名称长度为2到20",
            trigger: "blur"
          }
        ],
        menutype: [
          {
            required: true,
            message: "请选择类型",
            trigger: "blur"
          }
        ],
        perms: [
          {
            required: true,
            message: "请输入权限标识",
            trigger: "blur"
          },
          {
            min: 2,
            max: 50,
            message: "权限标识长度为2到50",
            trigger: "blur"
          }
        ],
        component: [
          {
            required: true,
            message: "请输入组件路径",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "组件路径为1到100",
            trigger: "blur"
          }
        ],
        path: [
          {
            required: true,
            message: "请输入路由地址",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "路由地址为1到100",
            trigger: "blur"
          }
        ],
        showorder: [
          {
            required: true,
            message: "请输入显示顺序",
            trigger: "blur"
          }
        ],
        memo: [
          {
            min: 0,
            max: 200,
            message: "显示顺序为0到200",
            trigger: "blur"
          }
        ]
      },
      submitUrl: state.addUrl
    };

    const showDialog = row => {
      state.isShowDialog = true;
      state.formLoading = true;
      if (row && row.id) {
        form.value = row;
        option.submitUrl = state.updateUrl;
      } else {
        form.value = {};
        form.value.parentid = row?.parentid;
        form.value.icon = "align-justify";
        if (typeof form.value.parentid == "undefined") {
          //默认上级为根节点
          form.value.parentid = 1;
        }
        option.submitUrl = state.addUrl;
      }
      state.formLoading = false;
    };

    const handleIcon = item => {
      form.value.icon = item.icon;
    };

    const onHandleSuccess = () => {
      emit("on-success");
      //保存成功后刷新树选择
      option.column[0].dictUrl = `system/menu/query?t=${Math.random()}`;
      state.isShowDialog = false;
    };

    const onHandleCancel = () => {
      state.isShowDialog = false;
    };

    const onHandleChange = item => {
      if (item.$event == "F") {
        //按钮
        option.column[4].disabled = true;
        option.column[5].disabled = true;
        form.value.component = "#";
        form.value.path = "#";
      } else {
        option.column[4].disabled = false;
        option.column[5].disabled = false;
      }
      console.info(option.column);
      console.info(form.value);
    };
    expose({ showDialog });
    return {
      ...toRefs(state),
      form,
      option,
      onHandleSuccess,
      onHandleCancel,
      handleIcon,
      onHandleChange
    };
  }
});
</script>
